<template>
  <div class="case-type">
    <div class="chart" id="caseTypePie"></div>
    <div class="info-block">
      <div class="info-item">
        <div class="title">刑事案件</div>
        <div class="value" style="color: #1BBE6B">71.4% ↓</div>
      </div>
      <div class="info-item">
        <div class="title">刑事案件</div>
        <div class="value" style="color: #1BBE6B">20.3% ↓</div>
      </div>
      <div class="info-item">
        <div class="title">刑事案件</div>
        <div class="value" style="color: #EA0000">20.3% ↑</div>
      </div>
    </div>
  </div>
</template>
<script>
import * as echarts from 'echarts'
export default {
  name: 'CaseType',
  methods:{
    initChart(){
      const chart=echarts.init(document.getElementById('caseTypePie'))
      const option={
        color:['#2EBAFE','#00D7E9','#80F2C3'],
        tooltip: {
          trigger: 'item'
        },
        series: [
          {
            name: '案件类型分析',
            type: 'pie',
            center:['50%','40%'],
            radius: '70%',
            label: {
              show: true,
              color: '#32B4FF',
              formatter: '{b}: {c}起 {d}%'
            },
            labelLine: {
              show: true
            },
            data: [
              {name:'殴打他人',value:15},
              {name:'盗窃',value:28},
              {name:'电信诈骗',value:13},
            ]
          }
        ]
      }
      chart.setOption(option)
    }
  },
  mounted() {
    this.initChart()
  }
}
</script>
<style scoped lang="scss">
.case-type{
  width: 100%;
  height: 100%;
  .chart{
    width: 100%;
    height: 50%;
  }
  .info-block{
    width: 100%;
    height: 50%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .info-item{
      width: 100%;
      height: calc(100%/3 - 10px);
      background: rgba(255,255,255,0.1);
      border-radius: 5px;
      display: flex;
      align-items: center;
      padding: 0 20px;
      .title{
        flex-grow: 1;
        color: #32B4FF;
        font-weight: bold;
      }
      .value{
        font-size: 14px;
      }
    }
  }
}
</style>
